<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
            display: none;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="adver">
        <!-- .adver-top>.adver-title+.adver-close -->
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div>
</body>
<script>
    // 动态操作小广告(默认隐藏)

    // 1. 5s后显示小广告
    // 2. 倒计时10秒后关闭小广告
    // 3. 重复 1 - 2 两步
    // 4. 点击 x  直接关闭



    var adver = document.getElementsByClassName("adver")[0]; // [div][0]
    var adverTitle = document.getElementsByClassName("adver-title")[0];
    var adverClose = document.getElementsByClassName("adver-close")[0];


    // 变量跨作用域
    // 一个作用域声明的变量 在另一个作用域中使用  
    // 解决方法:
    // 放在两个作用域均能访问的位置

    // 全局变量
    var delayTimer = null; //记录延时器编号
    var timer = null; // 记录计时器编号 


    adverLoop(); // 1

    // 事件冒泡: 
    // click: .adver-close -> .adver-top  -> .adver

    adver.onclick = function () {
        location.href = "https://www.baidu.com";
    }

    adverClose.onclick = function (e) {

        adver.style.display = "none";
        clearTimeout(delayTimer);  //  清除延时器
        clearInterval(timer);  // 清除计时器
        // adverLoop();

        var e = e || window.event;

        // 常规浏览器 
        // e.stopPropagation();    // Propagation 传播

        // IE低版本/ 常规浏览器 
        // e.cancelBubble = true;  // 是否阻止冒泡

        // 兼容
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }


    }



    // 5s后显示小广告
    function adverLoop(delay) {

        // 问题: 
        // 每次调用此函数都会启动一个新的延时器 => 但是delayTimer只能记录一个延时器编号 => 只能清除最后一个 

        // 解决方法
        // 每次启动下一个之前 先清除上一个


        delay = (delay === undefined ? 5000 : delay);
        clearTimeout(delayTimer);
        delayTimer = setTimeout(function () {
            adver.style.display = "block";

            var num = 10;
            adverTitle.innerText = `距离广告关闭还有${num}秒`;
            timer = setInterval(function () {
                num--;
                adverTitle.innerText = `距离广告关闭还有${num}秒`;

                if (num <= 0) { //计时结束
                    clearInterval(timer);
                    adver.style.display = "none";

                    adverLoop(delay); // 每次结束之后调用自己
                }

            }, 1000);
        }, delay)
    }




</script>

</html>